<template>
	<view>
		<!-- 消息漫游时长 -->
		<picker mode="selector" :range="manyouList" range-key="name" @change="manyouChange">
			<view class="manyou center">
				<view class="flex">消息漫游时长</view>
				<text>{{ setting.chatSyncTimeLen | manyou }}</text>
				<image src="../../static/user/right_arr.png" mode="aspectFill"></image>
			</view>
		</picker>
		<!-- 上线时间 -->
		<picker mode="selector" :range="shangxianList" range-key="name" @change="shangxianChange">
			<view class="box">
				<view class="time">
					<view class="allow">
						<view>谁可以看到我的上线时间</view>
						<view>{{setting.showLastLoginTime | shangxin}}</view>
					</view>
					<image src="../../static/user/right_arr.png" mode="aspectFill"></image>
				</view>
			</view>
		</picker>
		<!-- 手机号码 -->
		<picker mode="selector" :range="shojiList" range-key="name" @change="shoujiChange">
			<view class="box">
				<view class="phone">
					<view class="number">
						<view>谁可以看到我的手机号码</view>
						<view>{{setting.showTelephone | shouji}}</view>
					</view>
					<image src="../../static/user/right_arr.png" mode="aspectFill"></image>
				</view>
			</view>
		</picker>
			<!-- 需要好友验证 -->
		<view class="box">
			<view class="friend common box">
				<view>需要好友验证</view>
				<switch class="switch" :checked="setting.friendsVerify==1" @change="haoyouChange" />
			</view>
		</view>
		<!-- 允许通过手机号搜索我 -->
		<view class="box">
			<view class="search common">
				<view>允许通过手机号搜索我</view>
				<switch class="switch" :checked="setting.phoneSearch==1"  @change="phoneChange" />
			</view>
		</view>
		<!-- 允许通过昵称搜索我 -->
		<view class="box">
			<view class="nicheng common">
				<view>允许通过昵称搜索我</view>
				<switch class="switch" :checked="setting.nameSearch==1" @change="nameChange" />
			</view>
		</view>
		<!-- 允许展示我的二维码 -->
		<view class="box">
			<view class="erwei common">
				<view>允许展示我的二维码</view>
				<switch class="switch" :checked="setting.showQRCode==1" @change="codeChange" />
			</view>
		</view>
		<!-- 允许展示我的位置 -->
		<view class="box">
			<view class="local common">
				<view>允许展示我的位置</view>
				<switch class="switch" :checked="setting.showMyLocation==1" @change="dizhiChange" />
			</view>
		</view>
		<!-- 添加好友 -->
<!-- 		<view class="box">
			<view class="addme">
				<view class="fangshi">
					<view>允许加我的方式</view>
					<view>二维码,名片,群组,手机号搜索,昵称搜索</view>
				</view>
				<image src="../../static/user/right_arr.png" mode="aspectFill"></image>
			</view>
		</view> -->
		<!-- 消息加密传输 -->
		<!-- <view class="box">
			<view class="jiami common">
				<view>消息加密传输</view>
				<switch class="switch" checked="true" @change="" />
			</view>
		</view> -->
		<!-- 消息来时振动 -->
		<!-- <view class="box">
			<view class="zhendong common">
				<view>消息来时振动</view>
				<switch class="switch" checked="true" @change="" />
			</view>
		</view> -->
		<!-- 让对方知道正在输入 -->
		<!-- <view class="box">
			<view class="print common">
				<view>让对方知道正在输入</view>
				<switch class="switch" checked="true" @change="" />
			</view>
		</view> -->
		<!-- 支持多设备登录 -->
		<view class="box">
			<view class="media common">
				<view>支持多设备登录</view>
				<switch class="switch" :checked="setting.multipleDevices==1" @change="deviceChange" />
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			chatSyncTimeLen: '', // 永久 -1.0 永不同步-2.0   1小时 0.04  1天 1.0  1周 7.0  一月30  一季度 90  一年365
			manyouList: [
				{ name: '永久', val: '-1.0' },
				{ name: '永不同步', val: '-2.0' },
				{ name: '1小时', val: '0.04' },
				{ name: '1天', val: '1.0' },
				{ name: '1周', val: '7.0' },
				{ name: '1月', val: '30.0' },
				{ name: '1季', val: '90.0' },
				{ name: '1年', val: '365.0' }
			],
			setting: '',
			showLastLoginTime: '', //上线时间 所有人不允许 -1  所有人允许1 所有好友2 手机联系人3
			shangxianList: [{ name: '所有人不允许', val: -1 }, { name: '所有人允许', val: 1 }, { name: '所有好友允许', val: 2 }, { name: '手机联系人允许', val: 3 }],
			showTelephone:'', //手机号码，所有人不允许 -1  所有人允许1 所有好友2 手机联系人3
			shojiList: [{ name: '所有人不允许', val: -1 }, { name: '所有人允许', val: 1 }, { name: '所有好友允许', val: 2 }, { name: '手机联系人允许', val: 3 }],
			friendsVerify:'',//需要好友验证 0不需要 1需要
			phoneSearch:'',//允许通过手机号搜索 0不 1可以
			nameSearch:'',//允许通过昵称搜索 0不 1可以
			showQRCode:'',//允许展示我的二维码 0不 1可以
			showMyLocation:'',//允许展示我的地址 0不 1可以
			multipleDevices:'',//允许多设备登陆 0不 1可以
		};
	},
	onShow() {
		that = this;
		this.userSettings();
	},
	methods: {
		// 允许多设备登陆
		deviceChange(e){
			this.setting.multipleDevices= this.multipleDevices=e.detail.value?1:'0'
			this.settingsUpdate();
		},
		// 允许展示我的地址
		dizhiChange(e){
			this.setting.showMyLocation= this.showMyLocation=e.detail.value?1:'0'
			this.settingsUpdate();
		},
		// 允许展示我的二维码
		codeChange(e){
			this.setting.showQRCode= this.showQRCode=e.detail.value?1:'0'
			this.settingsUpdate();
		},
		// 允许通过昵称搜索
		nameChange(e){
			this.setting.nameSearch= this.nameSearch=e.detail.value?1:'0'
			this.settingsUpdate();
		},
		// 是否可以手机号搜索
		phoneChange(e){
			this.setting.phoneSearch= this.phoneSearch=e.detail.value?1:'0'
			this.settingsUpdate();
		},
		// 是否需要好友验证
		haoyouChange(e){
			this.setting.friendsVerify= this.friendsVerify=e.detail.value?1:'0'
			this.settingsUpdate();
		},
		// 谁可以看到手机号
		shoujiChange(e){
			this.setting.showTelephone = this.showTelephone = this.shojiList[e.detail.value].val;
			this.settingsUpdate();
		},
		// 上线时间设置
		shangxianChange(e){
			this.setting.showLastLoginTime = this.showLastLoginTime = this.shangxianList[e.detail.value].val;
			this.settingsUpdate();
		},
		// 消息漫游设置
		manyouChange(e) {
			this.setting.chatSyncTimeLen = this.chatSyncTimeLen = this.manyouList[e.detail.value].val;
			this.settingsUpdate();
		},
		// 回显历史设置
		userSettings() {
			this.$ajax(
				this.apiList.userSettings,
				{
					userId: uni.getStorageSync('userinfo').userId
				},
				'GET'
			).then(res => {
				this.setting = res.data;
			});
		},
		// 设置
		settingsUpdate() {
			let parems = {
				userId: uni.getStorageSync('userinfo').userId,
				chatSyncTimeLen: this.chatSyncTimeLen, //消息漫游时长
				showLastLoginTime: this.showLastLoginTime, //谁可以看到我的上线时间
				showTelephone:this.showTelephone, //谁可以看我手机号
				friendsVerify:this.friendsVerify,//好友验证
				phoneSearch:this.phoneSearch,
				nameSearch:this.nameSearch,
				showQRCode:this.showQRCode,
				showMyLocation:this.showMyLocation
			};
			if(this.showMyLocation==''){
				delete parems.showMyLocation
			}
			if(this.showQRCode==''){
				delete parems.showQRCode
			}
			if(this.nameSearch==''){
				delete parems.nameSearch
			}
			if(this.phoneSearch==''){
				delete parems.phoneSearch
			}
			if(this.friendsVerify==''){
				delete parems.friendsVerify
			}
			if(this.chatSyncTimeLen==''){
				delete parems.chatSyncTimeLen
			}
			if(this.showLastLoginTime==''){
				delete parems.showLastLoginTime
			}
			if(this.showTelephone==''){
				delete parems.showTelephone
			}
			this.$ajax(this.apiList.settingsUpdate, parems, 'GET').then(res => {
				this.$sToast('设置成功');
			});
		}
	},
	filters: {
		shouji(value){
			let shouji = '';
			that.shojiList.map(item => {
				if (item.val == value) {
					shouji = item.name;
				}
			});
			return shouji;
		},
		shangxin(value) {
			let shangxin = '';
			that.shangxianList.map(item => {
				if (item.val == value) {
					shangxin = item.name;
				}
			});
			return shangxin;
		},
		manyou(value) {
			let manyou = '';
			that.manyouList.map(item => {
				if (item.val == value) {
					manyou = item.name;
				}
			});
			return manyou;
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f3f3f3;
}

image {
	padding-right: 30rpx;
	width: 12rpx;
	height: 24rpx;
}

.manyou {
	height: 104rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	image {
		width: 25rpx;
		height: 25rpx;
	}
}

.manyou view {
	margin-left: 30rpx;
}

.manyou image {
	margin-left: 20rpx;
}

.manyou text {
	color: #666;
	font-size: 30rpx;
}
.box {
	background-color: #ffffff;
	image {
		width: 25rpx;
		height: 25rpx;
	}
}
.time {
	box-sizing: border-box;
	border-bottom: 1rpx solid #e0e0e0;
	justify-content: space-between;
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	height: 124rpx;
	background-color: #fff;
	margin-left: 30rpx;
}

.allow view {
	font-size: 30rpx;
	font-weight: 500;
	color: #333;
}

.allow view:nth-child(2) {
	color: #999999;
	font-size: 26rpx;
	font-weight: 500;
}

.phone {
	box-sizing: border-box;
	justify-content: space-between;
	display: flex;
	align-items: center;
	height: 124rpx;
	background-color: #fff;
}

.number {
	margin-left: 30rpx;
}

.number view:nth-child(2) {
	color: #999999;
	font-size: 26rpx;
	font-weight: 500;
}

.fangshi view:nth-child(2) {
	color: #999999;
	font-size: 26rpx;
	font-weight: 500;
}

.common {
	border-bottom: 1px solid rgba(224, 224, 224, 1);
	color: rgba(51, 51, 51, 1);
	font-size: 30rpx;
	font-weight: 500;
	margin-left: 30rpx;
	height: 124rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.switch {
	transform: scale(0.8);
}

.friend {
	margin-top: 20rpx;
}

.addme {
	box-sizing: border-box;
	justify-content: space-between;
	display: flex;
	align-items: center;
	height: 124rpx;
	background-color: #fff;
}

.more {
	padding-left: 30upx;
	view {
		font-size: 30rpx;
		font-size: 500;
		color: #333;
	}
}

.more view:nth-child(2) {
	color: #999999;
	font-size: 26rpx;
	font-weight: 500;
}

.fangshi {
	margin-left: 30rpx;
}

.jiami {
	margin-top: 20rpx;
}

.media {
	margin-top: 20rpx;
}
</style>
